<template>
    <div class="full-screen">
        <app-layout>
            <app-aside slot="aside" dark>
                <app-brand slot="brand" title="OS功能演示" sub-title=""></app-brand>
                <app-nav slot="nav" :unique-opened="false">
                    <template v-for="route in routes">
                        <app-nav-menu
                            :key="route.name"
                            :route-name="route.name"
                            :title="route.title"
                            :icon="route.icon"
                        >
                            <template v-if="route.children">
                                <template v-for="r in route.children">
                                    <app-nav-menu :key="r.name" :route-name="r.name" :title="r.title"></app-nav-menu>
                                </template>
                            </template>
                        </app-nav-menu>
                    </template>
                </app-nav>
            </app-aside>
            <router-view></router-view>
        </app-layout>
    </div>
</template>

<script>
import routes from '@/router/routes';
import { join } from '@isyscore/utils/path';

const travel = (routes) => {
    const navList = [];
    const childTravel = (childNavList, routes, namespace) => {
        const deepTravel = (routes, namespace) => {
            if (!routes) debugger;
            routes.forEach((route) => {
                const { path, name, meta = {}, children } = route;
                const { title, icon, nav } = meta;
                const navPath = join(namespace, path);

                if (nav === true)
                    childNavList.push({
                        path: navPath,
                        name: name,
                        title: title,
                        meta: meta,
                        icon
                    });
                if (children) deepTravel(children, navPath);
            });
        };

        deepTravel(routes, namespace);
    };

    routes.forEach((route) => {
        if (route.meta) {
            const { path, name, meta = {}, children } = route;
            const { title, icon } = meta;
            const navItem = {
                path,
                name: name,
                title: title,
                icon
            };

            if (children) {
                const childNavList = [];
                childTravel(childNavList, children, path);
                navItem.children = childNavList;
            }
            navList.push(navItem);
        }
    });

    return navList;
};
export default {
    name: 'App',
    data: () => ({
        routes: []
    }),
    computed: {},

    created() {
        this.routes = travel(routes);
        // this.$router.push({name:'配置中心'});
    }
};
</script>

<style scoped>
::v-deep .isc-range-separator {
    width: 20px !important;
}
.full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
}
.bg-grey {
    background: #e0e0e0;
}
</style>
